<template>
  <div class="queryCondition">
    <div class="optional-fields">
      <h3>可选字段</h3>
      <el-table :data="optionalData" border
      @row-dblclick="dbClick">
        <el-table-column prop="columnNotes" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="columnName" label="数据库对应字段" width="180">
        </el-table-column>
        <el-table-column prop="columnType" label="类型" width="180">
        </el-table-column>
      </el-table>
    </div>
    <div class="selected-field">
      <div class="header">
        <h3>已选字段</h3>
        <div class="operate">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="danger">删除</el-button>
        </div>
      </div>
      <div class="content">
        <el-table :data="selectedData" border>
        <el-table-column prop="columnNotes" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="columnName" label="数据库对应字段" width="180">
        </el-table-column>
          <el-table-column prop="columnType" label="数据库对应字段" width="180">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      optionalData: [],
      selectedData: []
    };
  },
  props: {
    tableName: {
      type: String,
    },
    menuId: {
      type: String,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$nextTick((_) => {
        this.$http
          .get(`/menu/selectTableByName?tableName=${this.tableName}`)
          .then((res) => {
            this.optionalData = res.data;
          });
      });
    },
    dbClick(row) {
       const flag =  this.selectedData.some(el => {
        return el.columnName === row.columnName
       })
       if (!flag) {
        this.selectedData.push(row)
       } else {
        this.$message({
            type: 'warning',
            message: '改字段已添加，不可重复添加'
        })
       }
    },
    save() {
      this.selectedData.forEach(el => {
        this.$set(el,'menuId',this.menuId)
      })
      this.$http.post('/menu/saveColumn',{
        columnMessage: this.selectedData
      }).then(res => {
        console.log(res);
      })
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
